ul {
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 2em;
}

a {
    text-decoration: none;
}

a:link, a:visited, a:active {
    color: black;
}

.avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    box-shadow: 0 0 10px 1px #00000057;
}

.baseInfo-container {
    text-align: left;
    width: 260px;
    margin: 40px auto;
}

.text-center {
    text-align: center;
}

@media screen and (min-width: 650px) {
    .baseInfo-container {
        text-align: left;
    }

    .baseInfo-container, .avatar-container {
        margin: 0;
        width: 48%;
        box-sizing: border-box;
        display: inline-block;
        padding: 20px;
    }

    .baseInfo-container .text-center {
        text-align: left;
    }

    .avatar-container {
        text-align: right;
        vertical-align: text-bottom;
    }

    .skill {
        margin-top: 130px !important;
        transform: scale(1.5);
    }

    .arrow {
        display: none;
    }

    .about {
        width: 430px !important;
    }
}

.vertical-top .fp-tableCell {
    vertical-align: top;
}

.skill {
    width: 370px;
    height: 370px;
    margin: auto;
    position: relative;
}

.call-me li a:hover {
    color: red;
}

.honor {
    min-width: 360px;
    max-width: 400px;
    height: 400px;
    margin: auto;
    text-align: left;
    list-style: circle;
    padding-left: 40px;
    box-sizing: border-box;
}

.skill .item {
    width: 80px;
    height: 80px;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    background: #fff;
    box-shadow: 0 0 10px 1px #00000057;
}

#top_left {
    transform: translate(-111%, -111%);
    background: url("../image/Csslogo.png");
    background-size:100% 100%;
}

#top {
    transform: translate(0%, -160%);
}

#top_right {
    transform: translate(111%, -111%);
}

#bottom_left {
    transform: translate(-111%, 111%);
}

#bottom {
    transform: translate(0%, 160%);
}

#right {
    transform: translate(160%, 0%);
}

#left {
    transform: translate(-160%, 0%);
}

#bottom_right {
    transform: translate(111%, 111%);
}

.show .item {
    transform: translate(0, 0) !important;
}

.skill {
    opacity: 1;
}

.skill.show {
    opacity: 0;
}

.skill .item, .show .item, .skill, .skill.show {
    transition: all 1s cubic-bezier(0, 0.67, 0.26, 1)
}

.arrow {
    text-align: center;
    position: fixed;
    bottom: 40px;
    left: 0;
    right: 0;
}

.arrow i {
    display: inline-block;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    border-top: 2px white solid;
    border-left: 2px white solid;
    animation: pound 1s infinite;
}

@keyframes pound {
    from {
        transform: translate(0, 20px) rotate(45deg);
        opacity: 0;
    }
    to {
        transform: translate(0, 0) rotate(45deg);
        opacity: 1;
    }
}

.about {
    width: 312px;
    margin: 0 auto;
    text-align: left;
}

.about p {
    text-indent: 2em;
}
